<template>
	<view class="hospital-serve">
		<UserDate :showDate='false' @changeUser='onChangeUser'></UserDate>
		<u-tabs :list="list" :is-scroll="false" :current="current" :active-color='themeColorLight' @change="change"></u-tabs>
		<view class="hospital-serve-current" v-show="current===0&&pramas">
			<view class="hospital-serve-current-main">
				<view v-for="item in cardLabel" :key="item.fKey" class="card-row">
					<label>{{item.label}}</label>{{pramas[item.key]||''}}
				</view>
				<view class="card-row" v-if="pramas.sfss==1">
					<label>手术时间：</label>{{pramas.sssj||''}}
				</view>
			</view>
			<view class="hospital-serve-current-btn flexR">
				<view @click="onClickPage('advance')"> 缴纳预交金 </view>
				<view @click="onClickPage('price')"> 查看费用信息 </view>
				<view v-if="pramas.sfss==1" @click="onClickPage('operation')"> 手术信息 </view>
				<view @click="onClickPage('medice')"> 出院带药 </view>
			</view>
		</view>
		<view class="hospital-serve-history" v-show="current===1&&listData.length">
			<view v-for="(item,index) in listData" :key="index" class="card" style="margin-top: 10rpx;">
				<view class="div-cut"></view>
				<view class="title u-border-bottom">
					<view class="left">
						<text class="iconfont icon-baogaoguanli_huaban1"></text>
						<text>{{item.dh||'5235653232323232'}}</text>
					</view>
					<view class="right">
					</view>
				</view>
				<view class="main flexR">
					<view class="left">
						<view class="row"> <text>患者姓名：</text>{{item.hzxm||''}} </view>
						<view class="row"> <text>入院时间：</text>{{item.ryrq||''}} </view>
						<view class="row"> <text>出院时间：</text>{{item.cysj||''}} </view>
					</view>
					<view class="right" @click="toPage(item)">
						<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="div-cut"></view>
			<u-empty text="暂无历史住院信息" mode="list" v-if="current===1&&!load&&listData.length===0"></u-empty>
			<u-empty text="暂无住院信息" mode="list" v-if="current===0&&!load&&!pramas"></u-empty>
		</view>
		<Load :load="load" ></Load>
	</view>
</template>

<script>
	import UserDate from '@/components/UserInfo/user-date.vue'
	import { themeColorLight } from '@/static/js/theme.js'
	import Load from '@/components/Load/index.vue'
	import { getHospitalization } from '@/api/home.js'
	import { mapGetters } from 'vuex'
	export default {
		components: { UserDate, Load },
		data() {
			return {
				themeColorLight,
				load:true,
				list:[{name:'当前住院信息'},{name:'历史住院信息'}],
				current:0,
				listData:[{}],
				pramas:'',
				cardLabel:[
					{
						label:'患者姓名：',
						key:'hzxm',
						fKey:'label11'
					},
					{
						label:'患者性别：',
						key:'sex',
						fKey:'label21'
					},
					{
						label:'入院时间：',
						key:'ryrq',
						fKey:'label31'
					},
					{
						label:'科室名称：',
						key:'ksmc',
						fKey:'label4'
					},
					{
						label:'医生名称：',
						key:'ysmc',
						fKey:'label5'
					},
					{
						label:'在院状态：',
						key:'zyzt',
						fKey:'label5'
					},
					{
						label:'预交总额：',
						key:'yjjlj',
						fKey:'label32',
						unit:'元'
					},
					{
						label:'预交余额：',
						key:'yjjye',
						fKey:'label6',
						unit:'元'
					},
					{
						label:'应付金额：',
						key:'zje',
						fKey:'label7'
					},
					{
						label:'自付金额：',
						key:'zfje',
						fKey:'label8'
					},
					{
						label:'是否手术：',
						key:'sfssName',
						fKey:'label6'
					},
				]
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad() {
			await this.$onLaunched
			this.initData()
		},
		methods: {
			change(val){
				this.current = val
			},
			initData(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				let params = {
					patId:this.userInfo.patId
				}
				getHospitalization(params).then(data => {
					this.load = false
					let res = data||[]
					this.listData = []
					this.pramas = {}
					res.forEach(item => {
						if(item.zyzt==4){
							item.zyztName = '已出院'
							this.listData.push(item)
						}else{
							item.zyztName = item.zyzt==1?'未入病区':item.zyzt==2?'在病区':item.zyzt==3?'出区待结算':''
							item.sfssName = item.sfss==1?'是':'否'
							this.pramas = item
						}
					})
				}).catch(e => {
					this.load = false
					this.listData = []
					this.pramas = ""
				})
			},
			toPage(item){
				let res = JSON.stringify(item)
				uni.navigateTo({
					url:'/pages/Service/HospitalServe/detail?params=' + res
				})
			},
			onClickPage(type){
				if(type==='advance'){
					uni.navigateTo({
						url:'/pages/Pay/advancePay?syxh=' + this.pramas.syxh
					})
				}else if(type==='price'){
					let res = {
						syxh:this.pramas.syxh
					}
					uni.navigateTo({
						url:'/pages/Service/HospitalServe/costInfo?params=' + JSON.stringify(res)
					})
				}else if(type==='operation'){
					let res = {
						blh: this.pramas.blh,
						sfzh: this.pramas.sfzh,
						sfzy:1
					}
					uni.navigateTo({
						url:'/pages/Home/Operation/index?query=' + JSON.stringify(res)
					})
				}else if(type==='medice'){
					let res = {
						blh: this.pramas.blh,
						sfzh: this.pramas.sfzh,
						sfzy:1
					}
					uni.navigateTo({
						url:'/pages/Home/Medicine/index?query=' + JSON.stringify(res)
					})
				}
			},
			onChangeUser(){
				this.initData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hospital-serve{
		height: calc(100vh);
		background-color: $uni-bg-color;
		&-current{
			padding-top: 10rpx;
			background-color: #eee;
			&-main{
				padding: 30rpx;
				background-color: $uni-bg-color;
			}
			&-btn{
				margin-top: 10rpx;
				padding: 20rpx 30rpx;
				background-color: $uni-bg-color;
				width: calc(100vw);
				flex-wrap: wrap;
				>view{
					flex: 1;
					height: 90rpx;
					color: #fff;
					background-color: $theme-color-light;
					min-width: 40%;
					max-width: 100%;
					text-align: center;
					line-height: 90rpx;
					border-radius: 12rpx;
					margin: 10rpx;
				}
			}
		}
		&-history{
			height: calc(100vh - 190rpx);
			overflow: scroll;
		}
	}
</style>
